<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			html {
				background: #EBEBEB;
				height: 100%;
				font-size: 13px;
			}
			strong {
				color: #f00;
			}
			form,p{
				margin: 0;
			}
			body {
				position: relative;
				margin: 0;
				background: #008EAD;
				height: 60%;
				margin: 0;
			}
			
			body>header {
				padding-top: 100px;
			}
			
			body>section {
				position: absolute;
				bottom: -100px;
				left: 0;
				right: 0;
				box-sizing: border-box;
				width: 400px;
				margin-left: auto;
				margin-right: auto;
				z-index: 1;
			}
			
			body>footer {
				text-align: center;
				position: fixed;
				bottom: 10px;
				left: 0;
				right: 0;
				line-height: 30px;
			}
			
			body>header>h1 {
				margin: 0;
				color: #fff;
				font-size: 500%;
				text-align: center;
			}
			.message-box {
				line-height: 30px;
			}
			.form-box {
				background: white;
				text-align: center;
				border-radius: 2px;
			}
			
			input.icoTip {
				border: 1px solid #D3D3D3;
				border-radius: 5px;
				padding: 10px 0px 10px 30px;
				background-repeat: no-repeat;
				width: 100%;
				box-sizing: border-box;
				background-position: 5px center;
			}
			
			input.icoTip:focus {
				border-color: #3333FF;
				outline: 0;
			}
			
			
			.ico-account {
				background-image: url();
			}
			
			.ico-password {
				background-image: url();
			}
			
			.form-fields {
				padding-left:15px;
				padding-right:15px;
			}
			.form-action {
				border-top: 1px solid #E7E7E7;
				padding: 10px 15px;
				display: table;
				width: 100%;
				box-sizing: border-box;
				vertical-align: middle;
			}
			.form-fields>p {
				margin-top: 0;
				margin-bottom: 15px;
			}
			.form-action>:first-child {
				display: table-cell;
				text-align: left;
			}
			
			.form-action>:last-child {
				display: table-cell;
				text-align: right;
			}
			
			button[type=submit] {
				background: #008EAD;
				border: 1px solid #008EaF;
				color: #fff;
				border-radius: 5px;
				font-weight: bold;
				padding: 10px 15px;
				cursor: pointer;
			}
			button[type=submit]:hover{
				background: #694530;
			}
			
		</style>
		  <style type="text/css"><!--
body{font-size:14px;font-family:arial,\5FAE\8F6F\96C5\9ED1,sans-serif;margin:auto;color:#3f3f3f}a:link{text-decoration:none;color:#09f}a:visited{text-decoration:none;color:#09f}a:hover{text-decoration:none;color:#f32}a:active{text-decoration:none;color:#ff0}.dx:link{color:#fff;background-color:#09f}.dx:hover{color:#fff;background-color:#5bf}.d1{background:#fff0df;box-shadow:0 0 5px #b1b1b1;position:fixed;top:0;_top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')?documentElement.scrollTop:document.body.scrollTop);filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;opacity:.7;z-index:100;width:100%;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#fc6;height:49px}.d1 a:link{color:#999;text-decoration:none}.d1 a:visited{color:#ccc;text-decoration:none}.d1 a:hover{color:#333;text-decoration:none}.d1 a:active{text-decoration:none}.d11{float:left;background-image:url(/img/logo3.gif);background-repeat:no-repeat;background-position:17px 14px;padding-top:18px;height:29px}.d12{float:right;padding-right:30px;padding-top:18px;height:29px}.d7{display:block;text-align:right;width:230px}.pc{background-color:#09f;height:15px;background-image:url(/img/logo3.gif);background-repeat:no-repeat;background-position:90% bottom;margin-top:45px;_margin-top:0;width:100%}.li{text-align:center;padding-top:17px;padding-bottom:7px;font-size:20px;color:#bbb;font-family:MingLiU,PMingLiU}.q7{background-color:#fc3;width:100%;margin-right:auto;margin-left:auto}.q1{font-size:37px;font-weight:bold;text-align:center;padding-top:70px;padding-left:150px}.q1 span{font-family:\9ED1\4F53}.q2{font-size:20px;color:#ff9;text-align:center;margin-top:27px;margin-bottom:13px;padding-left:150px;font-family:MingLiU,PMingLiU}.q3{text-align:center;padding-left:150px;padding-top:20px;font-size:16px}.q5{background-image:url(q/web/q2.gif);background-repeat:no-repeat;background-position:0 30px;height:300px;float:left;width:700px}.q9{height:306px;width:998px;margin-right:auto;margin-left:auto;background-image:url(q/web/q9.gif);background-repeat:no-repeat;background-position:right bottom;padding-top:23px;padding-bottom:23px}.y0{background-color:#fff;padding:23px;_top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')?documentElement.scrollTop:document.body.scrollTop);filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;opacity:.7;z-index:100;width:220px;border-radius:5px;float:right}.y1{font-size:26px;text-align:center;padding-top:17px}.y2{width:170px;margin-right:auto;margin-left:auto;line-height:37px;margin-top:11px;margin-bottom:11px;color:#f60;text-align:center}.y3{text-align:center;color:#777}.y6{border: 1px solid #D5D5D5;background-image: linear-gradient(#FCFCFC, #EEE);background-color: #f7f7f7;text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);text-align:center;margin-right:auto;margin-left:auto;width:130px;margin-top:7px;display:block;padding:7px;border-radius:5px;color:#000}.y6:link{color:#000}.y6:hover{border:1px solid #fc3;color:#999;}.y6:visited{color:#333}.y6:active{background-color:#ffc;    background-image: linear-gradient(#dcdcdc, #d8d8d8);box-shadow:inset 0 2px 3px rgba(0,0,0,0.15)}.v1{font-family:"Raleway","Open Sans","Helvetica Neue",Microsoft JhengHei,arial,sans-serif,\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;font-size:26px;margin-top:7px;margin-bottom:7px;text-align:center;color:#333}.v2{text-align:center;margin-top:17px}.v3{height:210px;background-color:#19a9e5;padding-top:39px;width:100%}.v4{font-family:"Raleway","Open Sans","Helvetica Neue",Microsoft JhengHei,arial,sans-serif,\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;font-size:30px;color:#fff;padding:7px}.v5{color:#fff;padding:7px;font-size:13px}.v6{font-size:17px;color:#adf;padding:7px}.v7{height:33px;width:118px;background-color:#6b0;text-align:center;margin-left:7px;border-radius:5px;display:block;line-height:33px}.v7:link{color:#fff;text-decoration:none}.v7:hover{background-color:#81d658;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.5)}.v7:visited{color:#fff}.v7:active{background-color:#509100;box-shadow:inset 0 2px 3px rgba(0,0,0,0.15)}.p8{float:left;width:220px;margin-left:3px;padding-top:160px;border:1px solid #fff;padding-bottom:30px}.p8:hover{background-image:url(q/web/i1.gif);background-repeat:no-repeat;background-position:-820px 22px;color:#000;border:1px solid #eee}.p7{float:left;width:220px;margin-left:3px;padding-top:160px;border:1px solid #fff;padding-bottom:30px}.p7:hover{background-image:url(q/web/i1.gif);background-repeat:no-repeat;background-position:-1046px 22px;color:#000;border:1px solid #eee}.p6{float:left;width:220px;margin-left:3px;padding-top:160px;border:1px solid #fff;padding-bottom:30px}.p6:hover{background-image:url(q/web/i1.gif);background-repeat:no-repeat;background-position:-1270px 22px;color:#000;border:1px solid #eee}.p5{float:left;width:220px;margin-left:3px;padding-top:160px;border:1px solid #fff;padding-bottom:30px}.p5:hover{background-image:url(q/web/i1.gif);background-repeat:no-repeat;background-position:-1496px 22px;color:#000;border:1px solid #eee}.p9{width:927px;height:273px;background-image:url(q/web/i1.gif);background-repeat:no-repeat;margin-right:auto;margin-left:auto;background-position:59px 23px;color:#999}.c{clear:both;height:70px}.h1{width:600px;padding-top:100px;padding-right:398px;padding-bottom:100px;margin-right:auto;margin-left:auto;background-image:url(q/web/i18.gif);background-repeat:no-repeat;background-position:682px -719px}.h1:hover{background-image:url(q/web/i18.gif);background-repeat:no-repeat;background-position:683px -719px}.h2{width:460px;margin-right:auto;margin-left:auto;padding-top:20px;padding-bottom:20px;padding-left:538px;background-image:url(q/web/i18.gif);background-repeat:no-repeat;background-position:0 -460px}.h3{height:180px;width:640px;margin-right:auto;margin-left:auto;padding-top:7px;padding-right:358px;padding-bottom:7px;background-image:url(q/web/i18.gif);background-repeat:no-repeat;background-position:718px -218px}.u{width:998px;margin-right:auto;margin-left:auto;height:200px}.u1{width:998px;margin-top:27px;border-top:1px solid #e1e1e1;margin-right:auto;margin-left:auto;margin-bottom:70px}.u2{width:365px;float:right;background-image:url(q/web/i9.png);background-repeat:repeat;height:197px}.u2:hover{border-right-width:1px;border-right-style:solid;border-right-color:#fff}.u3{height:100px;width:500px;padding-top:50px;padding-bottom:50px;float:left}.u5{height:193px;width:362px;background-image:url(q/web/i18.gif);background-repeat:no-repeat}.m1{font-family:"Raleway","Open Sans","Helvetica Neue",Microsoft JhengHei,arial,sans-serif,\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;font-size:26px;padding:7px}.m2{color:#999;padding:7px;line-height:1.5em}.foot{width:100%;padding-top:39px;padding-bottom:30px;color:#aaa;font-size:12px;line-height:30px;border-top-width:1px;border-top-style:solid;border-top-color:#ddd}.foot a:link{color:#19a9e5}.foot a:visited{text-decoration:none;color:#19a9e5}.foot a:hover{color:#f32}.f0{font-size:14px;border-radius:5px;margin-bottom:17px;line-height:normal;color:#333}.f1{font-size:12px;text-align:center;word-spacing:7px;width:100%;margin-right:auto;margin-left:auto;margin-top:50px;padding-bottom:98px;padding-top:8px}.f3{float:left;width:198px}.f5{clear:both;width:998px;height:1px}.f6{width:998px;margin-right:auto;margin-left:auto}.f7{display:block;height:41px;width:130px;background-image:url(q/web/y3.gif);margin-right:auto;margin-left:auto;border:1px solid #000}.f7:hover{background-image:url(q/web/y3.gif);border:1px solid #ccc;background-position:0 95px}.f9{height:50px;width:130px;background-image:url(q/web/y3.gif);background-position:0 50px}.up{width:50px;height:50px;background:url(/img/top.gif) no-repeat 0 0}.up:hover{background:url(/img/top.gif) no-repeat 0 -50px}.up:active{box-shadow:inset 0 5px 5px rgba(0,0,0,0.15)}::-moz-selection{background:#000;color:#fff}::selection{background:#000;color:#fff}::-webkit-scrollbar{background:rgba(0,0,0,0.1);height: 9px;width:9px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.2)}::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.3);}::-webkit-scrollbar-thumb:active {background:rgba(0,0,0,0.5);}
-->
</style>

		<style>
			.eagel-box {
				text-align: center;
				position: relative;
				bottom: -100px;
				z-index: -1;
			}
			.sprt-eagle {
				background-image: url(/static/img/sprt_eagle.png);
				background-repeat: no-repeat;
				display: inline-block;
				vertical-align: bottom;
				position: relative;
			}
			
			.sprt-eagle.head {
				height: 91px;
				width: 97px;
				background-position: -30px 0px;
				z-index: 100;
			}
			.sprt-eagle.hand-left {
				height: 20px;
				width: 30px;
				background-position: 0px -71px;
				left: -30px;
				z-index: 200;
			}
			.sprt-eagle.hand-left.hiding {
				height: 20px;
				background-position: 0px -37px;
			}
			.sprt-eagle.hand-left.hided {
				height: 37px;
				background-position: 0px 0px;
			}
			.sprt-eagle.hand-right {
				height: 20px;
				width: 30px;
				background-position: 0px -71px;
				left: 30px;
				z-index: 200;
			}
			.sprt-eagle.hand-right.hiding {
				height: 20px;
				background-position: -127px -37px;
			}
			.sprt-eagle.hand-right.hided {
				height: 37px;
				background-position: -127px 0px;
			}
		</style>
	</head>
	
	<body>
		<header>
			<style type="text/css">
			<!--
			h2{font-family: 黑体;font-size: 15px;
			border-bottom-width: thick;text-align: center;color: #fff
			}

			/*.p2{border-style: dotted solid double;border-width: 5px 10px 15px 20px}*/
			-->
			</style>
			<h1>四则运算在线出题系统</h1>

		</header>
		<section>
			<div class="eagel-box">
				<i class="sprt-eagle hand-left"></i>
				<i class="sprt-eagle head"></i>
				<i class="sprt-eagle hand-right"></i>
			</div>
			<div class="form-box">

				<p class="message-box">
					<strong>欢迎各位学生使用！</strong>
				</p>
				<form action="#" method="post">
					<div class="form-fields">
						<p>
							<input class="icoTip ico-account" type="text" name="account" placeholder="账号">
						</p>
						<p>
							<input class="icoTip ico-password" name="password" type="password" placeholder="密码">
						</p>
					</div>
					<div class="form-action">
						<span>
						<a class="y6"href="/teacher.html">登录</a>
					</span>
						<span>
						<!--<button type="submit" href="#">登陆</button>-->
						<a class="y6" href="/teacher.html">忘记密码？</a>
					</span>
					</div>
				</form>
			</div>
		</section>

		<footer>
			&copy;daiguoxi 2020-2021 All Rights Reservered.
		</footer>
	</body>
	<script type="text/javascript" src="/static/js/jquery-3.2.1.min.js" ></script>
	<script>
		
		var eagleLeftHandEL=$(".hand-left");
		var eagleRightHandEL=$(".hand-right");
		var eagleHandHidedStatus=[{left:45,bottom:6},{left:-45,bottom:6}];
		$("input[type=password]").focus(function(){
			eagleLeftHandEL.animate(eagleHandHidedStatus[0],{
				step:hidingStep,
				duration:500
			});
			eagleRightHandEL.animate(eagleHandHidedStatus[1],{
				step:hidingStep,
				duration:500,
				complete:function(){
					setTimeout(eaglePeek,1000);
				}
			});
		}).blur(function(){
			//立即结束动画
			eagleRightHandEL.stop(true,true);
			eagleLeftHandEL.stop(true,true);
			
			
			eagleLeftHandEL[0].hideStatus=0;
			eagleLeftHandEL[0].className="sprt-eagle hand-left";
			eagleLeftHandEL[0].style="";
			
			eagleRightHandEL[0].hideStatus=0;
			eagleRightHandEL[0].className="sprt-eagle hand-right";
			eagleRightHandEL[0].style="";
			
		});
		var eagleShow=function(){
			$(".eagel-box").animate({
				bottom:-6
			},1000,function(){
				this.style.zIndex=100;
			});
		};
		/**
		 * the hiding step control
		 * @param {Object} now
		 * @param {Object} fx
		 */
		var hidingStep=function(now,fx){
			if(fx.prop==="bottom"){
				now=Math.floor(now);
				if(now===3&&this.hideStatus!==1){
					this.classList.add("hiding");
					this.hideStatus=1;
				}else if(now===5&&this.hideStatus!==2){
					this.classList.remove("hiding");
					this.classList.add("hided");
					this.hideStatus=2;
				}
			}
		};
		/**
		 * the eagel peak
		 */
		var eaglePeek=function(){
			if(eagleRightHandEL[0].hideStatus===2){
				eagleRightHandEL.animate({
					bottom:3,
					left:-25
				},300,function(){
					setTimeout(function(){
						if(eagleRightHandEL[0].hideStatus===2){
							eagleRightHandEL.animate(eagleHandHidedStatus[1],200);
						}
					},500);
				});
			}
		};
		eagleShow();
	</script>

</html>